<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js">
    </script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            position: relative;
            padding: 0;
            margin: 0;
            margin-left: 500px;
        }
        li{
            float: left;
        }
        li .img1{
            width: 250px;
            height: 250px;
            position: absolute;
            left: -750px;
        }
        li .img2{
            width: 250px;
            height: 250px;
            position: absolute;
            left: -1000px;
        }
        li .img3{
            width: 250px;
            height: 250px;
            position: absolute;
            left: -1250px;
        }
        li .img03{
            animation-name: rollIn;
            animation-duration: 2s;
            position: absolute;
            left: 0px;
            animation-timing-function: cubic-bezier(0, .99, 1, .02);
            animation-delay: 1s;
            
        }
        li .img02{
            animation-name: rollIn;
            animation-duration: 2s;
            position: absolute;
            left: 0px;
            animation-timing-function: cubic-bezier(0, .99, 1, .02);
            animation-delay: 1s;
            z-index: 3;
        }
        li .img4{
           width: 250px;
            height: 250px;
            z-index: 4;
        }
        @keyframes rollIn {
            from {
                opacity: 0;
                transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -120deg);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
        @keyframes hinge{
            from{
                transform: rotateZ(0deg);
                transform-origin: 0 0;
            }
            40%,70%{transform: rotateZ(80deg);
            transform-origin: 0 0;
            }
            20%,80%{
                transform: rotateZ(60deg);
                transform-origin: 0 0;
            }
            to{
                transform: translateY(1000px);
            }
        }
        .ani{
            animation-fill-mode: both;
            animation-name: hinge;
            animation-timing-function: ease;
            animation-duration: 1s;
        }
    </style>
    <script>
        $(function(){
            
            $(".img4").on("click",function(){
                $(".img4").addClass("ani");
                $(".img3").addClass("img03");
            })
            $(".img3").on("click",function(){
                $(".img3").addClass("ani");
                $(".img2").addClass("img02");
            })
            $(".img2").on("click",function(){
                $(".img2").addClass("ani");
                $(".img1").addClass("img03");
            })
            $(".img1").on("click",function(){
                $(".img1").addClass("ani");
                $(".img4").addClass("img03");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li><img src="../imgs/01.jpg" class="img1"/></li>
        <li><img src="../imgs/02.jpg" class="img2"/></li>
        <li><img src="../imgs/03.jpg" class="img3"/></li>
        <li><img src="../imgs/04.jpg" class="img4"/></li>
    </ul>
</body>
</html>